<template>
  <div class="mod-menu">
    <div class="mb30 brbt">
      <div class="flxaligin"><span>可提现余额:</span><span class="mlr20 font30">{{bill.gains_able	}}</span>
        <el-button type="primary" @click="goWD">提现</el-button>
      </div>
      <div class=" ml15 flxaligin">待入账：<span class="font30"> {{bill.withdraw_amount}}</span>
        <el-button class="mlr20" @click="goStayIncome()">待入账记录</el-button>
      </div>
      <div class=" ml15 flxaligin">已提现: <span class="font30"> {{bill.gains_take_out}}</span>
        <el-button class="mlr20" @click="goWithdrawDeposit()">提现记录</el-button>
        <span class="mlr20">冻结中:</span><span class="font30"> {{bill.lock_amount}}</span>
      </div>
    </div>
    <el-form :inline="true" :model="pamars">
      <el-form-item label="单号">
        <el-input v-model="pamars.code" placeholder="单号" clearable></el-input>
      </el-form-item>
      <el-form-item label="收入支出">
        <el-select v-model="pamars.bill_type" clearable placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="交易类型" v-if="pamars.bill_type===1">
        <el-select v-model="pamars.inner_mode" clearable placeholder="请选择">
          <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="交易类型" v-if="pamars.bill_type===0">
        <el-select v-model="pamars.outer_mode" clearable placeholder="请选择">
          <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" row-key="Id" border style="width: 100%; ">
      <el-table-column prop="code" align="center" label="单号">
      </el-table-column>
      <!-- <el-table-column prop="name" align="center" label="交易单号">
      </el-table-column> -->
      <el-table-column prop="bill_type" align="center" :formatter="billType" label="收入/支出">
      </el-table-column>
      <el-table-column prop="mode" align="center" label="交易类型">
      </el-table-column>
      <el-table-column prop="entry_value" align="center" label="交易金额">
      </el-table-column>
      <el-table-column prop="remark" align="center" label="说明">
      </el-table-column>
      <el-table-column prop="format_create_time_millis" align="center" label="交易时间">
      </el-table-column>

    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pamars.page" :page-sizes="[10, 20, 50, 100]" :page-size="pamars.limit" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"></el-pagination>
    <!-- 点击提现 -->
    <withdraw-deposit v-if="addOrUpdateVisible" ref="withdrawDeposit" @updataList='updataList'></withdraw-deposit>
  </div>
</template>

<script>
import withdrawDeposit from './withdraw-deposit'
import seviceApi from '@/api/serviceApi.js'
import { priceDecimals } from '@/utils/validate'
export default {
  data () {
    return {
      bill: {
        gains_able: '',
        withdraw_amount: '',
        gains_take_out: '',
        lock_amount: ''
      },
      pamars: {
        page: 1,
        limit: 10,
        code: '',
        bill_type: '',
        inner_mode: '',
        outer_mode: ''
      },
      totalPage: 0,
      dataList: [],
      dataListLoading: false,
      addOrUpdateVisible: false,
      options: [
        {
          value: 0,
          label: '支出'
        }, {
          value: 1,
          label: '收入'
        }
      ],
      options2: [{
        value: 1,
        label: '销售商品'
      }, {
        value: 2,
        label: '销售服务'
      }, {
        value: 3,
        label: '运费所得'
      }
      ],
      options3: [
        {
          value: 1,
          label: '提现'
        }
      ]
    }
  },
  components: {
    withdrawDeposit
  },
  mounted () {
    this.getList()
    this.gainsbill()
  },
  methods: {
    // 更新列表
    updataList (e) {
      if (e == 1) {
        this.getList()
        this.gainsbill()
      }
    },
    // 统计商家所得相关数据
    gainsbill () {
      seviceApi.getGainsbill().then(res => {
        if (res && res.data.code == 200) {
          this.bill.gains_able = priceDecimals(res.data.data.gains_able)
          this.bill.withdraw_amount = priceDecimals(res.data.data.withdraw_amount)
          this.bill.gains_take_out = priceDecimals(res.data.data.gains_take_out)
          this.bill.lock_amount = priceDecimals(res.data.data.lock_amount)
        }
      })
    },
    // 获取列表数据
    getList () {
      seviceApi.getGainsbillList(this.pamars).then(res => {
        if (res && res.data.code == 200) {
          this.dataList = res.data.page.list
          this.totalPage = res.data.page.totalCount
        }
      })
    },
    // 收入支出
    billType (row, column) {
      let status = row.bill_type
      if (status == 0) {
        return '支出'
      } else {
        return '收入'
      }
    },
    // 交易类型
    innerMode (row, column) {
      let status = row.inner_mode
      if (status == 0) {
        return '非收入'
      } else if (status == 1) {
        return '销售商品'
      } else if (status == 2) {
        return '销售服务'
      } else {
        return '运费所得'
      }
    },
    // 每页数
    sizeChangeHandle (val) {
      this.pamars.limit = val
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pamars.page = val
      this.getList()
    },
    // 查询
    getDataList () {
      this.pamars.page = 1
      this.getList()
    },
    // 新增 / 修改
    goWD () {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.withdrawDeposit.init()
      })
    },
    // 待入账记录
    goStayIncome () {
      this.$router.push({ name: 'stayIncomeList' })
    },
    // 提现记录
    goWithdrawDeposit () {
      this.$router.push({ name: 'withdrawDepositList' })
    }
  }
}
</script>
<style lang="scss">
.mt10 {
  margin-top: 10px;
}
.mb30 {
  margin-bottom: 30px;
}
.mlr20 {
  margin: 0 20px;
}
.c-0079FE {
  color: #0079fe;
}
.c-pointe {
  cursor: pointer;
}
.font36 {
  font-size: 36px;
}
.font30 {
  font-size: 30px;
}
.brbt {
  border-bottom: 5px solid #cccccc;
  display: flex;
  align-items: center;
  padding-bottom: 10px;
}
.flxaligin {
  display: flex;
  align-items: center;
}
.ml15 {
  margin-left: 15px;
}
</style>
